<template>
  <section class="box-service-install">
		<client-only>
			<div class="box-install">
				<div class="install-title">合作案例</div>
				<div class="pc">
					<swiper class="install-swiper" :options="swiperOption">
						<swiper-slide class="install-swiper-slide" v-for="(val, index) in installList" :key="index">
							<div class="install-swiper-slide-item" v-for="(item, key) in val.content" :key="key">
								<img :src="require(`@/static/install_${index}${key}.png`)">
								<div class="install-swiper-slide-item-title">{{ item.title }}</div>
								<div class="install-swiper-slide-item-des">{{ item.des }}</div>
							</div>
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div class="mobile">
					<swiper class="install-swiper" :options="swiperOption">
						<swiper-slide class="install-swiper-slide" v-for="(val, index) in swiperOptionMobile(installList)" :key="index">
							<img :src="require(`@/static/install_${parseInt(index/2)}${index%2}.png`)">
							<div class="install-swiper-slide-item-title">{{ val.title }}</div>
							<div class="install-swiper-slide-item-des">{{ val.des }}</div>
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<!-- <div class="install-btn">了解更多</div> -->
			</div>
		</client-only>
	</section>
</template>
<script>
export default {
	data () {
		return {
			swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 3000
        },
        loop: true
			},
			installList: [
        {
          content: [
            {
              title: '运营商某小区',
              des: '投放10台设备，设备+安装费用1.5万元，使用电子卡营销工具，3个月回笼资金，每月收入3000元'
            },
            {
              title: '运营商某商圈',
              des: '使用储值卡工具+单次不退款支付功能带来超高客单价；使用分账功能与场地方自动分账，合作更满意'
            }
          ]
        },
        {
          content: [
            {
              title: '某大型运营商',
              des: '运营上千台设备，设备和人员管理成本很高，使用DingGo系统后，实现数字化派工，运维人效比从50台/人增加到500台/人，运维成本节约40%'
            },
            {
              title: '某社区服务商',
              des: '自有品牌已有相当知名度，使用OEM定制化服务，充电设备和用户端小程序/H5均显示自有品牌，并实现独立收款。充电服务也无缝嵌入到自己的社区服务平台中，实现了更加多元化的社区服务'
            }
          ]
        },
        {
          content: [
            {
              title: '物业自采',
              des: '之前采购的设备不稳定，业务投诉多。使用叮叮充电桩后设备稳定可靠，没有业主投诉；资金实时无中转到账，对账单清晰明了'
            },
            {
              title: '学校/事业单位自用',
              des: '使用计费模板功能，既可自动实现内部员工免费使用，也可对外来流动人员单独收费； 使用实体卡在线开卡功能，为员工同事发行实体充电卡，并可以实现管理端在线充值，方便快捷'
            }
          ]
        }
			],
			installListMobile: [
				{
					title: '新小区投放新小区投放新小区投放新小区投放新小区投放新小区投放新小区投放',
					des: '使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。'
				},
				{
					title: '新小区投放',
					des: '使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。'
				},
				{
					title: '新小区投放',
					des: '使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。'
				},
				{
					title: '新小区投放',
					des: '使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。'
				},
				{
					title: '新小区投放',
					des: '使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。'
				},
				{
					title: '新小区投放',
					des: '使用设计工具的好处在于，当这些项目材料同时呈现，能够帮助我们进行模式识别，并促进更多。'
				}
			]
		}
	},
  computed: {
    swiperOptionMobile () {
      return (val) => {
				let res = []
				val.forEach(val => {
					val.content.forEach(item => {
						res.push(item)
					})
				})
        return res
      }
    }
	}
}
</script>
<style lang="sass" scoped>
.titleStyle
  width: 100%
  margin: 0 auto
  text-align: center
  margin: 60px auto 48px
  color: #282C32
  font-size: 32px
  font-weight: 400
.knowMoreBtn
  width: 380px
  height: 52px
  border-radius: 4px
  border-color: rgba(48, 54, 64, 0.15)
  border-width: 1px
  border-style: solid
  line-height: 52px
  text-align: center
  color: rgba(48, 54, 64, 0.7)
  margin: 0 auto
.box-service-install
	@media screen and (min-width: 750px)
		height: 900px
		clear: both
		overflow: hidden
	@media screen and (max-width: 750px)
		height: 130vw
	.box-install
		@media screen and (min-width: 750px)
			width: 1180px
		@media screen and (max-width: 750px)
			width: 100vw
		margin: 0 auto
		.install-title
			@media screen and (min-width: 750px)
				width: 100%
				margin: 0 auto
				text-align: center
				margin: 60px auto 48px
				color: #282C32
				font-size: 32px
				font-weight: 400
				margin-top: 80px
				margin-bottom: 48px
			@media screen and (max-width: 750px)
				width: 100vw
				margin: 0 auto
				text-align: center
				margin: 24px auto 18px
				color: #282C32
				font-size: 28px
				font-weight: bolder
				margin-top: 20px
				margin-bottom: 16px
		.pc
			@media screen and (max-width: 750px)
				display: none
			.install-swiper
				width: 1180px
				height: 690px
				.install-swiper-slide
					width: 1180px
					height: 590px
					display: flex
					flex-direction: row
					justify-content: space-around
					.install-swiper-slide-item
						box-shadow: 0px 4px 16px rgba(19, 27, 39, 0.05)
						width: 580px
						height: 590px
						img
							width: 580px
							height: 360px
							margin-bottom: 32px
						.install-swiper-slide-item-title
							font-size: 26px
							line-height: 32px
							color: #282C32
							margin-left: 24px
							margin-bottom: 16px
							overflow: hidden
							text-overflow: ellipsis
							white-space: nowrap
						.install-swiper-slide-item-des
							width: 532px
							font-size: 20px
							line-height: 30px
							color: rgba(48, 54, 64, 0.7)
							margin-left: 24px
							overflow: hidden
							text-overflow: ellipsis
							display: -webkit-box
							-webkit-line-clamp: 4
							-webkit-box-orient: vertical
		.mobile
			@media screen and (min-width: 750px)
				display: none
			width: 90vw
			margin-left: 5vw
			.install-swiper
				width: 90vw
				height: 110vw
				.install-swiper-slide
					width: 90vw
					img
						width: 90vw
					.install-swiper-slide-item-title
						font-size: 22px
						line-height: 30px
						color: #282C32
						margin: 10px auto 10px
						overflow: hidden
						text-overflow: ellipsis
						white-space: nowrap
					.install-swiper-slide-item-des
						width: 90vw
						font-size: 18px
						line-height: 24px
						color: rgba(48, 54, 64, 0.7)
		.install-btn
			@media screen and (min-width: 750px)
				width: 380px
				height: 52px
				border-radius: 4px
				font-size: 18px
				border-color: rgba(48, 54, 64, 0.15)
				border-width: 1px
				border-style: solid
				line-height: 52px
				text-align: center
				color: rgba(48, 54, 64, 0.7)
				margin: 0 auto
			@media screen and (max-width: 750px)
				width: 180px
				height: 32px
				border-radius: 4px
				border-color: rgba(48, 54, 64, 0.15)
				border-width: 1px
				border-style: solid
				line-height: 32px
				text-align: center
				color: rgba(48, 54, 64, 0.7)
				margin: 10px auto 0
		.install-btn:hover
			border-color: #F57033
			color: #F57033
			cursor: pointer
</style>
<style lang="sass">
.install-swiper
  .swiper-pagination
    .swiper-pagination-bullet-active
      background: #F57033
</style>
